<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cyberpunk</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="hero">
        <!-- Slider main container -->
        <div class="swiper-container">
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
                <!-- Slides -->
                <div class="swiper-slide">
                    <img src="img/background-1.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="img/background-2.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="img/background-3.png" alt="">
                </div>
            </div>
        </div>
        <div class="container">
            <header class="header">
                <a href="#" class="logo">
                    <img src="img/logo.svg" alt="" class="logo-img">
                </a>
                <div class="header-social-links">
                    <a href="#" class="social-link"><img
                            src="img/youtube-logo.svg" alt=""
                            class="social-img"></a>
                    <a href="#" class="social-link"><img src="img/vk-logo.svg"
                            alt="" class="social-img"></a>
                    <a href="#" class="social-link"><img
                            src="img/facebook-logo.svg" alt=""
                            class="social-img"></a>
                    <a href="#" class="social-link"><img
                            src="img/twitter-logo.svg" alt=""
                            class="social-img"></a>
                    <a href="#" class="social-link"><img
                            src="img/twitch-logo.svg" alt=""
                            class="social-img"></a>
                    <a href="#" class="social-link"><img
                            src="img/instagram-logo.svg" alt=""
                            class="social-img"></a>
                </div>
            </header>
            <!-- /.header -->
            <div class="yellow">
                <h2 class="yellow-title">Доступно на всех платформах</h2>
                <a href="#" class="yellow-btn">Узнать больше
                </a>
            </div>
        </div>
        <!-- /.container -->
    </div>
    <!-- hero -->
    <div class="description">
        <div class="container">
            <h2 class="desc-title">Найт-Сити изменит тебя навсегда!</h2>
            <p class="desc-text"><span>Cyberpunk 2077</span> — приключенческая
                ролевая игра,
                действие
                которой происходит в мегаполисе Найт-Сити, где власть, роскошь и
                модификации
                тела ценятся выше всего. Ты играешь за V, наёмника в поисках
                устройства,
                позволяющего обрести бессмертие. Ты сможешь менять
                киберимпланты, навыки и
                стиль игры своего персонажа, исследуя открытый мир, где твои
                поступки влияют
                на ход сюжета и всё, что тебя окружает.</p>
            <div class="desc-image-container">
                <div class="desc-left-images">
                    <img src="img/desc-img-left-top.jpg" alt=""><img
                        src="img/desc-img-left-bottom.jpg" alt="">
                </div>
                <div class="desc-right-image">
                    <img src="img/desc-img-right.jpg" alt="">
                </div>
            </div>
            <!-- /.desc-image-container -->
        </div>
        <!-- /.container -->
    </div>
    <!-- /.description -->
    <img src="img/transition-top.png" alt="transition top"
        class="transition-top">
    <div class="form-container">
        <div class="container">
            <div class="form-desc">
                <img src="img/offer.svg" alt="Акция" class="offer-img">
                <h2 class="form-title">Играй и выигрывай!</h2>
            </div>
            <p class="form-text">Играй в <span>Cyberpunk 2077</span> и
                получи возможность
                выиграть
                консоль <span>Xbox Series X</span> или <span>Sony
                    PlayStation 5!</span>
                Заполни форму
                ниже и приложи
                скриншот о покупке игры. Итоги розыгрыша будут подведены
                1
                февраля. Удачи!
                &#59;&#41;</p>
            <div class="form-block">
                <form action="#" class="form">
                    <input class="form-block-input" type="text" id="name"
                        name="name" placeholder="Как тебя зовут?" required>
                    <input class="form-block-input" type="email" id="email"
                        name="email" placeholder="Твой е-mail" required>
                    <div class="custom-file-input">
                        <span class="file-button">Прикрепить скриншот</span>
                        <span class="file-format">.png/.jpg/.pdf</span>
                        <input type="file" id="screenshot" name="screenshot"
                            class="file-input" accept=".png, .jpg, .pdf">
                    </div>
                    <button class="button-form" type="submit">Отправить</button>
                    <input type="checkbox" class="custom-checkbox" id="agree"
                        name="agree" value="yes">
                    <label class="form-checkbox" for="agree">Согласен на
                        обработку персональных
                        данных</label>
                </form>
                <div class="image-container">
                    <div class="image-1">
                        <img src="img/x-box.png" alt="Xbox">
                    </div>
                    <div class="image-2">
                        <img src="img/ps-5.png" alt="Ps 5">
                    </div>
                </div>
            </div>
        </div>
        <!-- /.container -->
    </div>
    <!-- /.form-container -->
    <img src="img/transition-bottom.png" alt="transition bottom"
        class="transition-bottom">
    <div class="promo">
        <div class="container">
            <div class="promo-container">
                <div class="promo-left">
                    <div class="image-top-block">
                        <img src="img/image-top.png" alt="Монитор"
                            class="image-top">
                    </div>
                    <div class="image-bottom-block">
                        <img src="img/hp-logo.svg" alt="Логотип"
                            class="image-bottom">
                        <img src="img/cross.svg" alt="Крестик"
                            class="image-bottom">
                        <img src="img/logo.svg" alt="Logo" class="image-bottom">
                    </div>
                </div>
                <div class="promo-right">
                    <h2 class="promo-title">Полное погружение вместе с HP</h2>
                    <p class="promo-text">Погрузись в современные экшен-игры с
                        реалистичным
                        изображением с помощью монитора с диагональю 23,8 дюйма,
                        созданном для
                        отображения максимально насыщенных цветов. Успевай
                        реагировать на любые
                        события с временем отклика 1 мс и частотой в 144 Гц!</p>
                    <div class="promo-description">
                        <div class="promo-desc">
                            <img src="img/color-lens.svg" alt="Color"
                                class="promo-desc-img">
                            <span class="promo-desc-text">Яркие насыщенные
                                цвета</span>
                        </div>
                        <div class="promo-desc">
                            <img src="img/crystal.svg" alt="Crystal"
                                class="promo-desc-img">
                            <span class="promo-desc-text">Кристальная четкость
                                изображения</span>
                        </div>
                        <div class="promo-desc">
                            <img src="img/motion.svg" alt="Motion"
                                class="promo-desc-img">
                            <span class="promo-desc-text">Быстрые движения и
                                плавный геймплей</span>
                        </div>
                    </div>
                    <a href="#" class="promo-btn">Подробнее</a>
                    <!-- /.promo-container -->
                </div>
                <!-- /.container -->
            </div>
        </div>
    </div>
    <!-- promo -->
    <div class="platform">
        <div class="platform-right-block"></div>
        <div class="platform-left-block">
            <h2 class="platform-title">Купить игру Cyberpunk 2077</h2>
            <span class="set">В комплект входит:</span>
            <div class="platform-desc-block">
                <div class="platform-desc">
                    <img src="img/disk.svg" alt="Disk"
                        class="platform-desc-image">
                    <span class="platform-desc-text">Футляр с игровыми
                        дисками</span>
                </div>
                <div class="platform-desc">
                    <img src="img/box.svg" alt="Disk"
                        class="platform-desc-image">
                    <span class="platform-desc-text">Футляр с кодом для загрузки
                        игры и дисками
                        (pc)</span>
                </div>
                <div class="platform-desc">
                    <img src="img/collections.svg" alt="Disk"
                        class="platform-desc-image">
                    <span class="platform-desc-text">Справочник с информацией об
                        игровом мире</span>
                </div>
            </div>
            <span class="platform-set">Выберите платформу:</span>
            <div class="platform-block">
                <img src="img/pc.svg" alt="pc" class="platform-block-image">
                <img src="img/xbox-one.svg" alt="xbox"
                    class="platform-block-image">
                <img src="img/stadia.svg" alt="stadia"
                    class="platform-block-image">
                <img src="img/ps4.svg" alt="ps4" class="platform-block-image">
            </div>
        </div>
    </div>
    <footer class="footer">
        <div class="container">
            <div class="footer-top">
                <div class="logo-container">
                    <img class="logo-footer-image" src="img/logo.svg"
                        alt="Logo 1">
                    <img src="img/logo-cd-red.svg" alt="Logo 2">
                </div>
                <div class="links-container">
                    <a href="#">Лицензия</a>
                    <a href="#">Политика конфиденциальности</a>
                </div>
            </div>
        </div>
        <!-- /.container -->
        <div class="footer-bottom">
            <p>CD PROJEKT®, Cyberpunk®, Cyberpunk 2077®</p>
        </div>
    </footer>
    <!-- /.footer -->
    <script src="js/swiper-bundle.min.js"></script>
    <script src="js/main.js"></script>
</body>
</html>